<template>
  <div id="app" class="cencat-app">
    <!-- 路由视图容器 -->
    <router-view v-slot="{ Component, route }">
      <transition
        :name="route.meta.transition || 'fade'"
        mode="out-in"
        appear
      >
        <keep-alive :include="keepAliveComponents">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
    
    <!-- 全局加载遮罩 -->
    <div v-if="globalLoading" class="global-loading">
      <div class="loading-content">
        <el-icon class="loading-icon" :size="40">
          <Loading />
        </el-icon>
        <div class="loading-text">{{ loadingText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useSystemStore } from '@/stores/modules/system'

/**
 * Vue根组件
 * @author cencat
 * @description 固定商家场景多租户SaaS企业综合管理系统根组件
 * @createTime 2024-01-01
 */

const router = useRouter()
const authStore = useAuthStore()
const systemStore = useSystemStore()

// 全局加载状态
const globalLoading = ref(false)
const loadingText = ref('加载中...')

// 需要缓存的组件列表
const keepAliveComponents = computed(() => {
  return systemStore.cachedViews
})

// 监听路由变化
router.beforeEach((to, from, next) => {
  // 显示加载进度
  globalLoading.value = true
  loadingText.value = '页面加载中...'
  
  // 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - Cencat SaaS 企业管理系统`
  }
  
  next()
})

router.afterEach(() => {
  // 隐藏加载进度
  setTimeout(() => {
    globalLoading.value = false
  }, 300)
})

// 全局错误监听
const handleGlobalError = (event: ErrorEvent) => {
  console.error('全局JavaScript错误:', event.error)
  ElMessage.error('系统发生错误，请刷新页面重试')
}

// 全局未处理的Promise拒绝监听
const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
  console.error('未处理的Promise拒绝:', event.reason)
  ElMessage.error('网络请求失败，请检查网络连接')
}

// 组件挂载时的初始化
onMounted(() => {
  // 添加全局错误监听
  window.addEventListener('error', handleGlobalError)
  window.addEventListener('unhandledrejection', handleUnhandledRejection)
  
  // 初始化系统配置
  systemStore.initializeSystem()
  
  // 检查用户登录状态
  if (authStore.token) {
    authStore.checkTokenValidity()
  }
  
  console.log('🎉 Cencat SaaS 企业管理系统初始化完成')
})

// 组件卸载时的清理
onUnmounted(() => {
  window.removeEventListener('error', handleGlobalError)
  window.removeEventListener('unhandledrejection', handleUnhandledRejection)
})
</script>

<style lang="scss">
// 全局样式
.cencat-app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
  // 路由过渡动画
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  
  .slide-right-enter-active,
  .slide-right-leave-active {
    transition: all 0.3s ease;
  }
  
  .slide-right-enter-from {
    transform: translateX(100%);
    opacity: 0;
  }
  
  .slide-right-leave-to {
    transform: translateX(-100%);
    opacity: 0;
  }
  
  .slide-left-enter-active,
  .slide-left-leave-active {
    transition: all 0.3s ease;
  }
  
  .slide-left-enter-from {
    transform: translateX(-100%);
    opacity: 0;
  }
  
  .slide-left-leave-to {
    transform: translateX(100%);
    opacity: 0;
  }
}

// 全局加载遮罩
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    
    .loading-icon {
      color: var(--el-color-primary);
      animation: rotate 1s linear infinite;
    }
    
    .loading-text {
      font-size: 14px;
      color: var(--el-text-color-regular);
      font-weight: 500;
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 暗色主题适配
.dark {
  .global-loading {
    background: rgba(0, 0, 0, 0.8);
  }
}
</style>